<template>
    <div class="cmsContent">
        <div class="butons">
            <el-button icon="el-icon-plus" @click="addCmsContent">添加</el-button>
            <el-button icon="el-icon-delete" @click="confirmDelete">删除</el-button>
            <el-input style="flex: 1; margin-left: 300px" placeholder="请输入名称搜索" prefix-icon="el-icon-search" v-model="searchKey">
            </el-input>
        </div>
        <div class="cmsContentTable">
            <el-table ref="cmsContentTable" tooltip-effect="dark" :data="csmData">
                <el-table-column type="selection"> </el-table-column>
                <el-table-column prop="title" label="内容名称"> </el-table-column>
                <el-table-column :filters="filterItems" :filter-method="filterHandler" prop="categoryName" label="分类名称">
                </el-table-column>
                <el-table-column prop="pic" width="200px" label="内容图片">
                    <template slot-scope="scope" v-if="scope.row.pic">
                        <img v-for="(pic, index) in scope.row.picList" :key="index" :src="pic" style="width: 100px; height: 100px" />
                    </template>
                </el-table-column>
                <el-table-column prop="url" label="内容超链接地址">
                    <template slot-scope="scope" v-if="scope.row.url">
                        <a :href="scope.row.url" target="_blank">{{ scope.row.url ? scope.row.url.substring(0, 100) : "" }}...</a>
                    </template>
                </el-table-column>
                <el-table-column prop="sortOrder" label="排序号"> </el-table-column>
                <el-table-column prop="status" label="是否启用"> </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit" @click="updateCmsContent(scope.$index, scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 100, 200, 300, 400]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <add-cms-content @close="close" :params="params" v-if="isShowCmsContentDialog" />
    </div>
</template>
<script lang="ts">
    import { Component, Vue, Watch } from "vue-property-decorator";
    import { namespace } from "vuex-class";
    import AdminApiActions from "@/components/api/admin-api-actions";
    import AddCmsContent from "@/components/admin-manager/cms-index-manager/cms-dialog/add-cms-content-dialog.vue";
    import $ from "jquery";
    const goodsName = namespace("goods");
    @Component({
        components: {
            AddCmsContent,
        },
    })
    export default class ProductBrand extends Vue {
        @goodsName.Mutation updateStatus;
        public total: any = 0;
        public searchKey: any = "";
        public csmData: Array < any > = new Array < any > ();
        public brandDialogVisible: boolean = false;
        public formLabelWidth: any = "120px";
        public params: any = {};
        public currentPage: number = 1;
        public pageSize: number = 5;
        public isSHowSelectCategory: boolean = false;
        public dialogStyle: any = {};
        public filterItems: Array < any > = new Array < any > ();
        public isShowCmsContentDialog: boolean = false;
        public scope: any = {};
        //创建时调用
        async created() {
            let apiActions = new AdminApiActions(this);
            let result = await apiActions.getCmsContentPage({
                title: "",
                pager: { pageSize: this.pageSize, currentPage: this.currentPage },
            });
            let cmsCategories = await apiActions.getCmsCategory({ title: "" });
            this.filterItems = cmsCategories.data.map((item) => {
                return {
                    text: item.name,
                    value: item.id,
                };
            });
            this.params.filterItems = this.filterItems;
            this.csmData = result.data.rows;
            this.total = result.data.total;
            this.$nextTick(() => {
                $(".el-table th.el-table_1_column_1>.cell").css({
                    "padding-left": "14px!important",
                });
            });
        }
        //分页发生变化
        public async handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            let apiActions = new AdminApiActions(this);
            let result = await apiActions.getCmsContentPage({
                name: "",
                pager: { pageSize: this.pageSize, currentPage: this.currentPage },
            });
            this.csmData = result.data.rows;
        }
        //当前页发生变化
        public async handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            let apiActions = new AdminApiActions(this);
            let result = await apiActions.getCmsContentPage({
                name: "",
                pager: { pageSize: this.pageSize, currentPage: this.currentPage },
            });
            this.csmData = result.data.rows;
        }
        //添加分组
        public addCmsContent() {
            this.params.type = "add";
            this.params.form = {};
            this.isShowCmsContentDialog = true;
        }
        //编辑分组
        public updateCmsContent(index, item) {
            this.params.form = item;
            this.isShowCmsContentDialog = true;
        }
        public confirmDelete() {
            let cmsContentTable: any = this.$refs.cmsContentTable;
            let selectData: Array < any > = cmsContentTable.selection;
            if (selectData.length == 0) {
                this.$alert("请选择数据", "提示", {
                    confirmButtonText: "确定",
                });
                return false;
            }
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(async () => {
                    await this.deleteCmsContent();
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                        center: true,
                    });
                })
                .catch(() => {});
        }
        //删除分组品牌
        public async deleteCmsContent() {
            let cmsContentTable: any = this.$refs.cmsContentTable;
            let selectData: Array < any > = cmsContentTable.selection;
            let apiActions = new AdminApiActions(this);
            let ids: any = selectData.map((item) => {
                return item.id;
            });
            await apiActions.deleteCmsContent(ids);
            let result = await apiActions.getCmsContentPage({
                name: "",
                pager: { pageSize: this.pageSize, currentPage: this.currentPage },
            });
            this.csmData = result.data.rows;
            this.total = result.data.total;
        }
        public async confirmSaveRls() {
            let apiActions = new AdminApiActions(this);
            let result = await apiActions.getCmsContentPage({
                name: "",
                pager: { pageSize: this.pageSize, currentPage: this.currentPage },
            });
            this.csmData = result.data.rows;
            this.total = result.data.total;
            this.isSHowSelectCategory = false;
        }
        //关闭
        public close() {
            this.isShowCmsContentDialog = false;
        }
        //确认数据
        public async confirm() {
            let apiActions = new AdminApiActions(this);
            let result = await apiActions.getCmsContentPage({
                name: "",
                pager: { pageSize: this.pageSize, currentPage: this.currentPage },
            });
            this.csmData = result.data.rows;
            this.total = result.data.total;
            this.isShowCmsContentDialog = true;
        }

        @Watch("searchKey")
        public async searchByKey(searchText: any) {
            let apiActions = new AdminApiActions(this);
            let result = await apiActions.getCmsContentPage({
                name: searchText,
                pager: { pageSize: this.pageSize, currentPage: this.currentPage },
            });
            this.csmData = result.data.rows;
            this.total = result.data.total;
        }
        //关联分类
        public reletedCatagory() {
            let brandTable: any = this.$refs.brandTable;
            let selectData: Array < any > = brandTable.selection;
            if (selectData.length == 0) {
                this.$alert("请勾选数据", "提示", {
                    confirmButtonText: "确定",
                });
                return false;
            }
            if (selectData.length > 1) {
                this.$alert("只能选中一条数据", "提示", {
                    confirmButtonText: "确定",
                });
                return false;
            }
            this.params.brandId = selectData[0].id;
            this.isSHowSelectCategory = true;
            this.centerDialog();
        }
        public centerDialog() {
            this.$nextTick(() => {
                let height = $(window).height();
                let dialogHeight = $(".relatedCatagory .el-dialog").height();
                this.dialogStyle = {
                    top: height / 2 - dialogHeight / 2 + "px",
                };
            });
        }
        public filterHandler(value, row, column) {}
    }
</script>
<style lang="less">
    .cmsContent {
        .relatedCatagory {
            .el-table {
                height: 300px;
            }
        }

        width: 100%;
        height: 100%;

        .el-dialog {
            width: 40%;
            margin-top: 0px !important;

            .dialog-footer {
                display: flex;
                justify-content: center;
            }
        }

        .el-table__body-wrapper {
            overflow-y: auto;
            height: calc(100% - 70px);
        }

        .has-gutter .el-table-column--selection .cell {
            padding-left: 14px !important;
        }

        border: soild 1px red;

        .butons {
            display: flex;
            flex-direction: row;
        }

        .cmsContentTable {
            height: calc(100% - 90px);

            .el-table {
                height: calc(100% - 40px);
            }

            .el-pagination {
                margin-top: 35px;
            }
        }
    }
</style>